import React, { Component, Children } from 'react';
import PropTypes from "prop-types";
import {
    View,
    StyleSheet,
    TouchableHighlight,
    Image,
    Dimensions
} from 'react-native';
import Label from '../label/index';
import SearchBar from '../searchBar/index.js';
import Color from "../../config/theme/standard/color";
import Fonts from '../../config/theme/standard/fonts';

import {getNavBarStyle} from './navBarStyle';
import Variables from '../../config/theme/styles/index';

export default class HeaderExtr extends Component {
    constructor(props) {
        super(props);
    }

    renderRight() {
        let { styles} = getNavBarStyle(Variables);
        let { rightButtonFuncMsg, rightButtonFuncMore } = this.props;
        return (
            <View style={styles.rightContent}>
                <TouchableHighlight 
                activeOpacity={0.7} underlayColor={'transparent'} onPress={rightButtonFuncMsg}
                    style={[styles.btnOuter ,{marginLeft: 12}]}
                >
                        <Image
                            style={styles.rightBtn}
                            source={require('../../assets/navBar_info_new.png')}
                            accessibilityComponentType={"button"}
                            accessibilityLabel={this.props.listenImgText}
                        />
                </TouchableHighlight>
                <TouchableHighlight activeOpacity={0.7} underlayColor={'transparent'}
                    style={[styles.btnOuter,{marginLeft: 19}]}
                    onPress={rightButtonFuncMore}>
                        <Image
                            style={styles.rightBtn}
                            source={require('../../assets/navBar_plus.png')}
                            accessibilityComponentType={"button"}
                            accessibilityLabel={this.props.rightImgText}

                        />
                </TouchableHighlight>
            </View>
        );
    }


    renderMiddle() {
        return this.props.children
    }

    renderLeft() {
        let { styles} = getNavBarStyle(Variables);
        let { logined, location, btnText } = this.props;
        let labelProps = {
            text: logined  ? location ? location : btnText : btnText,
            labelStyle: {color: Color.navBar.title, fontSize: location ? Fonts.navBar.locationButtonFontSize : Fonts.navBar.loginButtonFontSize}
        };

        let leftContentStyle = [styles.leftContent]
        
        if(this.props.logined && this.props.location) {
            leftContentStyle.push({justifyContent: 'flex-start'})
        }
                
        return (
            <View style={leftContentStyle}>
                 {(this.props.location && this.props.logined) ? <View style={styles.leftImageContainer}>
                    <Image
                        style={styles.leftImage}
                        source={require('../../assets/navBar_location.png')}
                    />
                </View> : null}
                <Label {...labelProps} />
            </View>
        );

    } 

    render() {
        let { styles} = getNavBarStyle(Variables);

        let leftBoxStyle = [styles.leftBox]
        let middleBoxStyle = [styles.middleBox]

        if(this.props.logined && this.props.location) {
            leftBoxStyle.push({width: 88})
        }

        return (

            <View style={[styles.outerBox]}>
                <TouchableHighlight activeOpacity={0.7} underlayColor={'transparent'} style={leftBoxStyle} onPress={this.props.leftButtonFunc}>
                    {this.renderLeft()}
                </TouchableHighlight>
                <View style={middleBoxStyle}>
                    <SearchBar placeholder={"搜产品 搜功能"} showSpeechIcon={true} showRightButton={false} textAlign={'left'} hasBackground={false} inputType={'small'} leftWidth={this.props.location && this.props.logined ? 228 : 200}/>
                </View>
                <View style={styles.rightBox}>
                    {this.renderRight()}
                </View>
            </View>

        );
    }
}

HeaderExtr.propTypes = {
    logined: PropTypes.bool,
    btnText: PropTypes.string,
    rightImgText: PropTypes.string,
    listenImgText: PropTypes.string

};

HeaderExtr.defaultProps = {
    logined: false,
    rightImgText: '',
    listenImgText: '',

};
